<template>
  <div
    class="container"
    :style="{'background-image': 'linear-gradient(' + setInfo.fromTinct + ',' +  setInfo.toTinct + ')'}"
  >
    <!-- 这里v-show说明；如果是从首页跳转进来，那么可以设置，不是则为阅读者模式 -->
    <div class="open" @click="drawer = true" v-show="this.$route.params.isCheck">
      <a title="打开设置">
        <i class="el-icon-d-arrow-left"></i>
      </a>
    </div>
    <!-- 内容区域 -->
    <div class="text" :class="[isSchema?'daytime':'night']">
      <div :class="[!isOpen?'leftOpen':'leftClose','left','textBox']">
        <!-- 标题 -->
        <div class="page" v-show="isLeftText">
          <div class="section">
            <input class="title ipt" v-model="setInfo.coverTitle" />
            <textarea class="ipt textContent" v-model="setInfo.coverText"></textarea>
          </div>
          <button class="openBtn" @click="open" title="打开">read more</button>
        </div>
        <!-- 左边文本内容 -->
        <div class="back" v-show="!isLeftText">
          <div class="section">
            <input class="title ipt" v-model="setInfo.leftTitle" />
            <textarea class="ipt textContent" v-model="setInfo.leftText"></textarea>
          </div>
        </div>
      </div>
      <div class="middle textBox">
        <div class="section">
          <input class="title ipt" v-model="setInfo.centerTitle" />
          <textarea class="ipt textContent" v-model="setInfo.centerText"></textarea>
        </div>
      </div>
      <div :class="[!isOpen?'rightOpen':'rightClose','right','textBox']">
        <div class="section" v-show="!isRighrText">
          <input class="title ipt" v-model="setInfo.rightTitle" />
          <textarea class="ipt textContent" v-model="setInfo.rightText"></textarea>
          <button class="closeBtn" @click="open" title="关闭">x</button>
        </div>
      </div>
    </div>
    <!-- 抽屉效果 -->
    <el-drawer
      title="设置自己的个性主题"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      :modal="modal"
    >
      <div class="content">
        <span>背景颜色设置(采用渐变):</span>
        <div class="choose">
          <span>开始颜色值:&nbsp;&nbsp;</span>
          <el-color-picker v-model="setInfo.fromTinct" show-alpha></el-color-picker>
        </div>
        <div class="choose">
          <span>结束颜色值:&nbsp;&nbsp;</span>
          <el-color-picker v-model="setInfo.toTinct" show-alpha></el-color-picker>
        </div>
        <div class="choose">
          <span>阅读验证码:</span>
          <input v-model="uses" placeholder="请输入6位的密码" />
        </div>
        <div class="save">
          <button @click="save">保存</button>
        </div>
      </div>
    </el-drawer>
    <!-- 黑白模式切换 -->
    <div class="switch">
      <span>{{isSchema?'白昼':'夜间'}}</span>
      <el-switch v-model="isSchema" active-color="#008c8c" inactive-color="#8590a6"></el-switch>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false, // 控制抽屉显示与隐藏
      direction: "rtl", // 控制抽屉打开的方向
      isOpen: true, // 控制页面的效果是打开还是关闭
      isLeftText: true, // 控制左边内容区域的显示与隐藏
      isRighrText: true, // 控制右边内容区域的显示与隐藏
      isSchema: true, //控制黑白模式的切换
      // 收集色彩
      // 收集用户设置的信息
      setInfo: {
        fromTinct: "#ffc0cb",
        toTinct: "#87ceeb",
        coverTitle: "封面标题",
        coverText: "封面内容",
        leftTitle: "左标题",
        leftText: "左边内容",
        centerTitle: "中间标题",
        centerText: "中间内容",
        rightTitle: "右标题",
        rightText: "右边内容",
      },
      // 作者验证密码
      uses: undefined,
      uuId: this.$route.params.uuId || 1,
      modal: false, //是否需要遮罩层
    };
  },
  methods: {
    // 抽屉关闭回调
    handleClose(done) {
      done();
    },
    // 控制书信打开动画的函数
    open() {
      this.isOpen = !this.isOpen;
      // 当点击打开时,应该需要的效果呈现是:内容在动画一半时正好消失,标题在一半时正好出来
      // 判断
      if (!this.isOpen) {
        //当打开时,左边先打开 打开速度是0.5s
        setTimeout(() => {
          this.isLeftText = !this.isLeftText;
        }, 200);
        // 有一个0.5s延迟
        setTimeout(() => {
          this.isRighrText = !this.isRighrText;
        }, 700);
      } else {
        // 当关闭时,右边先打开
        setTimeout(() => {
          this.isRighrText = !this.isRighrText;
        }, 200);
        setTimeout(() => {
          this.isLeftText = !this.isLeftText;
        }, 700);
      }
    },
    // 根据id获取书信数据回调
    async getletterData() {
      // 这里需要传入作者id者，等用户信息实现就可以调用,暂时手动输入
      let result = await this.$API.reqgetletterByid(this.uuId);
      // 判断
      if (result.code === 200) {
        // 判断作者是否设置了密码
        if (result.data.uses) {
          let check = prompt("请输入验证密码");
          if (check === result.data.uses) {
            // 通过验证 赋值数据
            this.setInfo = result.data.content;
          } else {
            this.$router.push("/");
          }
        } else {
          this.setInfo = result.data.content;
        }
      } else {
        this.$message({
          type: "error",
          message: result.message,
        });
      }
    },
    // 保存书信的回调
    async save() {
      let { uses, setInfo, uuId } = this;
      if (uses && uses.length !== 6) {
        return this.$message("请保证阅读验证码为6位");
      }
      // 需要收集三个参数 uuId setInfo uses
      let data = { uuId, uses, setInfo };
      let result = await this.$API.saveLetter(data);
      if (result.code === 200) {
        this.$message({
          type: "success",
          message: result.message,
        });
      }
    },
  },
  mounted() {
    // 根据id获取书信数据
    this.getletterData();
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  // background-color: #fff;
  position: relative;
  .openBtn {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translate(-50%);
    // background: #008c8c;
    color: #008c8c;
    border: none;
    padding: 10px 5px;
    border-radius: 10px;
    cursor: pointer;
  }
  .closeBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 50%;
    background: #008c8c;
    color: #fff;
    border: none;
  }
  .text {
    width: 100%;
    height: 100%;
    padding: 5%;
    box-sizing: border-box;
    display: flex;
    .left,
    .middle,
    .right {
      position: relative;
      min-width: 400px;
      width: 33.333%;
      min-height: 600px;
      height: 100%;
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 20px;
      box-sizing: border-box;
    }
    .left {
      transform: rotateY(180deg);
      // 翻转点的设置
      transform-origin: 100% 50%;
    }
    .right {
      transform: rotateY(180deg);
      transform-origin: 0% 50%;
    }
    .page {
      height: 100%;
      transform: rotateY(180deg);
      position: relative;
    }
  }
  .open {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50% 0 0 50%;
    background: #fff;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    text-align: center;
    i {
      color: #008c8c;
      font-weight: 700;
      cursor: pointer;
    }
  }
  /deep/.el-drawer__header span {
    font-weight: 700;
    color: #008c8c;
  }
  .content {
    padding: 0 20px;
    span {
      color: #008c8c;
    }
    .choose {
      height: 40px;
      line-height: 40px;
      padding: 10px 0;
      display: flex;
      justify-content: start;
      input {
        margin-left: 10px;
        min-width: 60px;
        border: 1px solid #008c8c;
        text-align: center;
        border-radius: 5px;
      }
    }
    .save {
      button {
        border: none;
        outline: none;
        border-radius: 5px;
        padding: 5px 10px;
        background: #008c8c;
        color: #fff;
        margin: 0 10px;
      }
    }
  }
}
// 打开和关闭的动画效果
.leftOpen {
  transform: rotateY(0deg) !important;
  transition: transform 0.5s;
}
.rightOpen {
  transform: rotateY(0deg) !important;
  transition: transform 0.5s 0.5s;
}
.leftClose {
  transform: rotateY(180deg);
  transition: transform 0.5s 0.5s;
  z-index: 3;
}
.rightClose {
  transform: rotateY(180deg);
  transition: transform 0.5s;
}
// 夜间模式
.night {
  .textBox {
    background: #000000;
  }
  textarea {
    color: #fff;
    background: #000000;
  }
  .ipt {
    color: #fff;
    background: #000000;
  }
}
// 白天模式
.daytime {
  .textBox {
    background: #ffffff;
  }
  textarea {
    color: #000;
    background: #fff;
  }
  .ipt {
    color: #000;
    background: #ffffff;
  }
}
.switch {
  height: 30px;
  line-height: 30px;
  position: absolute;
  top: 0;
  right: 20px;
  color: #008c8c;
  span {
    margin-right: 10px;
  }
}
</style>

<style lang="less" scoped>
.section {
  .ipt {
    border: none;
    outline: none;
    display: block;
    width: 100%;
  }
  .title {
    margin: 0 auto;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    padding: 10px 0;
  }
  .textContent {
    text-indent: 32px;
    font-size: 16px;
    height: 300px;
    overflow-y: hidden;
  }
}
</style>
